<!-- 通知信息-->

<template>
    <el-dialog
      :model-value="dialogFormVisible"
      :destroy-on-close="true"
      title="通知信息"
      width="450px"
      @close="emits('closeDialog')"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="rules"
        :label-width="formLabelWidth"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="dialogForm.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="dialogForm.content" />
        </el-form-item>
        <el-form-item label="用户id" prop="uid">
          <el-input v-model="dialogForm.uid" />
        </el-form-item>
        <el-form-item label="语言" prop="lang">
          <el-input v-model="dialogForm.lang" />
        </el-form-item>
        <el-form-item label="app标识" prop="app_mark">
          <el-input v-model="dialogForm.app_mark" />
        </el-form-item>
        <el-form-item label="奖励钻石(如:1,2)" prop="diamond">
          <el-input v-model="dialogForm.diamond" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emits('cancel')">取消</el-button>
          <el-button
            type="primary"
            @click="submit(dialogForm)"
            :loading="btnLoading"
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import { ref } from "vue";
  const dialogFormRef = ref(null);
  
  defineProps({
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    dialogForm: {
      type: Object,
      default: {
        title: "",
        content: "",
        uid: "",
        lang: "",
        app_mark: "",
        diamond: "",
      },
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);
  
  const formLabelWidth = "120px";
  // 校验
  const rules = {
    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
    content: [{ required: true, message: "请输入内容", trigger: "blur" }],
    uid: [{ required: true, message: "请输入用户id", trigger: "blur" }],
    lang: [{ required: true, message: "请输入语言", trigger: "blur" }],
    app_mark: [{ required: true, message: "请输入app标识", trigger: "blur" }],
    diamond: [{ required: true, message: "请输入奖励钻石", trigger: "blur" }],
  };
  
  // 提交
  const submit = (dialogForm) => {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          emits("submitForm", dialogForm);
        } catch (error) {
          console.log(error);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  </script>
  